<template>
  <view>
    <t-dialog v-model:visible="category" header="公告分类" width="50%" :footer="false">
      <t-button @click="formObj.show('添加公告分类', {}, '添加公告分类')" style="margin-bottom: 10px">
        <template #icon><add-icon /></template>
        新增
      </t-button>
      <MyTable
        @unGetList="unGetCategoryList"
        :columns="categoryColumns"
        :data="categoryData"
        v-model:pagination="pagination"
      >
        <template #op="{ row }">
          <Space>
            <Link theme="primary" @click="categoryEdit(row)"> 修改 </Link>
            <Link theme="danger" @click="categoryDelete(row)"> 删除 </Link>
          </Space>
        </template>
      </MyTable>
    </t-dialog>

    <FormDialogGroup :form-obj="formObj">
      <template #default="{ formData, item }">
        <template v-if="item == '添加公告分类' || item == '编辑公告分类'">
          <t-form-item label="标题" name="title">
            <t-input v-model="formData.title" :style="{ width: '480px' }" placeholder="请输入标题" />
          </t-form-item>
        </template>
      </template>
    </FormDialogGroup>
    <t-dialog
      v-model:visible="confirmVisible"
      header="确认删除当前所选项目？"
      body="删除后，数据将被清空，且无法恢复"
      @confirm="onConfirmDelete"
    />
  </view>
</template>
<script setup lang="ts">
import { formGroup } from '@/components/formDialog/FormDialog';
import MyTable from '@/components/myTable/index.vue';
import FormDialogGroup from '@/components/formDialog/FormDialogGroup.vue';
import { Space, Link, MessagePlugin } from 'tdesign-vue-next';
import {
  getCategoryList,
  addCategory,
  getCategoryInfo,
  editCategory,
  DeleteCategory,
} from '@/api/system/InternalAnnouncement';
import { ref } from 'vue';
const category = ref(false);
const categoryColumns = [
  {
    title: 'ID',
    colKey: 'ncId',
  },
  {
    title: '标题',
    colKey: 'title',
  },
  {
    title: '添加时间',
    colKey: 'createTime',
  },
  {
    title: '操作',
    colKey: 'op',
  },
];
const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total: 0,
});

const categoryData = ref([]);
const emit = defineEmits(['unGetCategoryList']);
const open = () => {
  category.value = true;
  unGetCategoryList();
};

const unGetCategoryList = async () => {
  try {
    const res = await getCategoryList({
      pageNum: pagination.value.defaultCurrent,
      pageSize: pagination.value.defaultPageSize,
    });
    categoryData.value = res.rows;
    pagination.value = {
      ...pagination.value,
      total: res.total,
    };
  } catch (e) {
    console.log(e);
  }
};

/** 添加对话框 */
const formObj = new formGroup();
formObj.add<any>(
  '添加公告分类',
  '添加公告分类',
  {},
  async (body) => {
    await addCategory(body.data);
    unGetCategoryList();
    emit('unGetCategoryList');
  },
  {
    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
  },
);

// 修改分类
const categoryEdit = async (row: any) => {
  try {
    let res = await getCategoryInfo(row.ncId);
    formObj.show(
      '编辑公告分类',
      {
        ...res.data,
      },
      '编辑公告分类',
    );
  } catch (e) {
    console.error('获取公告分类详情失败:', e);
    MessagePlugin.error('获取公告分类详情失败');
  }
};

formObj.add<any>(
  '编辑公告分类',
  '编辑公告分类',
  {},
  async (body) => {
    await editCategory(body.data);
    unGetCategoryList();
    emit('unGetCategoryList');
  },
  {
    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
  },
);

// 删除分类
// 删除
const confirmVisible = ref(false);
const deleteId = ref([]);
const onConfirmDelete = () => {
  let ids = deleteId.value.join(',');
  DeleteCategory(ids).then(() => {
    confirmVisible.value = false;
    MessagePlugin.success('删除成功');
    unGetCategoryList();
    emit('unGetCategoryList');
  });
};

const categoryDelete = (row: any) => {
  confirmVisible.value = true;
  deleteId.value = [row.ncId];
};

defineExpose({
  open,
});
</script>
